<template>
  <div class="conversion-history-container">
    <div class="page-header">
      <h2>📋 转换历史</h2>
      <p>查看和管理您的文档转换记录</p>
    </div>

    <div class="history-content" if.bind="!isLoading">
      <!-- 统计信息 -->
      <div class="statistics-section" if.bind="history.length > 0">
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-value">${getStatistics().total}</div>
            <div class="stat-label">总转换次数</div>
          </div>
          <div class="stat-item success">
            <div class="stat-value">${getStatistics().successful}</div>
            <div class="stat-label">成功转换</div>
          </div>
          <div class="stat-item error">
            <div class="stat-value">${getStatistics().failed}</div>
            <div class="stat-label">失败转换</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">${getStatistics().successRate}%</div>
            <div class="stat-label">成功率</div>
          </div>
        </div>
      </div>

      <!-- 搜索和过滤 -->
      <div class="filter-section" if.bind="history.length > 0">
        <div class="filter-controls">
          <div class="search-box">
            <input type="text" 
                   placeholder="搜索文件名..."
                   value.bind="searchTerm"
                   input.trigger="setSearchTerm($event.target.value)"
                   class="form-input">
            <span class="search-icon">🔍</span>
          </div>
          
          <select value.bind="filterFormat"
                  change.trigger="setFilterFormat($event.target.value)"
                  class="form-select">
            <option value="">所有格式</option>
            <option repeat.for="format of getUniqueFormats()" 
                    value.bind="format">
              ${getFormatIcon(format)} ${format.toUpperCase()}
            </option>
          </select>
          
          <div class="sort-controls">
            <button class="btn btn-sm btn-outline-primary" click.trigger="setSortBy('date')">
              按时间 ${sortBy === 'date' ? (sortOrder === 'asc' ? '↑' : '↓') : ''}
            </button>
            <button class="btn btn-sm btn-outline-primary" click.trigger="setSortBy('name')">
              按名称 ${sortBy === 'name' ? (sortOrder === 'asc' ? '↑' : '↓') : ''}
            </button>
            <button class="btn btn-sm btn-outline-primary" click.trigger="setSortBy('size')">
              按大小 ${sortBy === 'size' ? (sortOrder === 'asc' ? '↑' : '↓') : ''}
            </button>
          </div>
        </div>
        
        <div class="filter-actions">
          <button class="btn btn-outline-primary" click.trigger="exportHistory()">
            📤 导出历史
          </button>
          <button class="btn btn-outline-danger" click.trigger="clearAllHistory()"
                  if.bind="history.length > 0">
            🗑️ 清空历史
          </button>
        </div>
      </div>

      <!-- 历史记录列表 -->
      <div class="history-list" if.bind="filteredHistory.length > 0">
        <div class="history-item" repeat.for="item of filteredHistory">
          <div class="item-icon">
            <span class="format-icon">${getFormatIcon(item.sourceFormat)}</span>
            <span class="arrow">→</span>
            <span class="format-icon">${getFormatIcon(item.targetFormat)}</span>
          </div>
          
          <div class="item-details">
            <div class="item-name">${item.originalName}</div>
            <div class="item-meta">
              <span class="item-size">${item.fileSize}</span>
              <span class="item-formats">${item.sourceFormat.toUpperCase()} → ${item.targetFormat.toUpperCase()}</span>
              <span class="item-time">${formatTimestamp(item.timestamp)}</span>
            </div>
            <div class="item-error" if.bind="item.error">
              ${item.error}
            </div>
          </div>
          
          <div class="item-status">
            <span class="status-badge ${getStatusClass(item.status)}">
              ${getStatusText(item.status)}
            </span>
          </div>
          
          <div class="item-actions">
            <button class="btn btn-sm btn-primary" click.trigger="downloadHistoryItem(item)"
                    if.bind="item.status === 'success' && item.downloadUrl"
                    title="重新下载">
              📥
            </button>
            <button class="btn btn-sm btn-outline-danger" click.trigger="deleteHistoryItem(item.id)"
                    title="删除记录">
              🗑️
            </button>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" if.bind="history.length === 0">
        <div class="empty-icon">📋</div>
        <h3>暂无转换历史</h3>
        <p>开始转换文档后，历史记录将显示在这里</p>
        <a href="/single-convert" class="btn btn-primary">
          开始转换
        </a>
      </div>

      <!-- 搜索无结果 -->
      <div class="no-results" if.bind="history.length > 0 && filteredHistory.length === 0">
        <div class="no-results-icon">🔍</div>
        <h3>未找到匹配的记录</h3>
        <p>尝试调整搜索条件或过滤器</p>
        <button class="btn btn-outline-secondary" click.trigger="clearFilters()">
          清除筛选
        </button>
      </div>

      <!-- 错误信息 -->
      <div class="error-message" if.bind="errorMessage">
        <div class="alert alert-error">
          <span class="alert-icon">⚠️</span>
          <span class="alert-text">${errorMessage}</span>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading-state" if.bind="isLoading">
      <div class="loading-spinner"></div>
      <p>正在加载历史记录...</p>
    </div>
  </div>
</template> 